<template>
  <a-card :loading="loading" :bordered="false">
    <!-- 业务表单 -->
    <a-form-model ref="form" :model="formData" :form="form" :rules="formRules" style="margin-top: 8px">
      <!-- 社团名称 -->
      <a-form-model-item prop="societyName" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="社团名称" >
        <!-- <a-input
          placeholder="请输入"
          v-model="formData.societyName"
          :disabled="!editable || editableFiexd['societyName']"
        /> -->
        <XSelectOrganization
          ref="XSelectOrganization"
          searchType="society"
          v-model="formData.societyId"
          :text="formData.societyName"
          :disabled="!editable || editableFiexd['societyId']"
          @onSelected="setSocietyName"
        ></XSelectOrganization>
      </a-form-model-item>

      <!-- 加入社团的用户ID -->
      <a-form-model-item
        :labelCol="{ span: 5 }"
        :wrapperCol="{ span: 15 }"
        label="申请人"
        prop="userId"
      >
        <x-select-user-by-dep
          v-model="formData.userId"
          :multi="false"
          :disabled="isFlow||!editable || editableFiexd['userId']"
          @selected="setUser"
        ></x-select-user-by-dep>
      </a-form-model-item>

      <!-- 理由 -->
      <a-form-model-item
        :labelCol="{ span: 5 }"
        :wrapperCol="{ span: 15 }"
        label="加入社团原因"
        prop="reason"
      >
        <a-textarea 
          rows="4"
          :maxLength="500"
          placeholder="最多可以输入500个字符"
          v-model="formData.reason"
          :disabled="isFlow||!editable || editableFiexd['reason']"/>
      </a-form-model-item>

      <!-- 加入时间 -->
      <a-form-model-item v-if="showJoinTime" prop="joinTime" label="加入时间" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }">
        <j-date
          placeholder="请选择日期"
          :disabled="!editable"
          v-model="formData.joinTime"
          :trigger-change="true"
          style="width: 100%"
        />
      </a-form-model-item>

      <!-- 离开时间 -->
      <a-form-model-item v-if="showLeaveTime" prop="leaveTime" label="离开时间" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }">
        <j-date
          placeholder="请选择日期"
          :disabled="!editable"
          v-model="formData.leaveTime"
          :trigger-change="true"
          style="width: 100%"
        />
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import JDate from '@/components/jeecg/JDate.vue'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import XSelectUserByDep from '@/components/extends/XSelectUserByDep'
import XSelectOrganization from '@/components/extends/XSelectOrganization'
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'SocietyMember',
  components: {
    JDate,
    JSelectDepart,
    JSelectMultiUser,
    XSelectUserByDep,
    XSelectOrganization
  },
  model: {
    prop: 'data',
    event: 'onchange'
  },
  props: {
    showJoinTime:Boolean,
    showLeaveTime:Boolean,
    isFlow:Boolean,
    dataId: String,
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    editable: {
      type: Boolean,
      default: true
    },
    editableFiexd:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data() {
    return {
      loading:true,
      userDisabled:false,
      url: {
        add: '/org/societyUser/add',
        edit: '/org/societyUser/edit',
        queryById: '/org/societyUser/queryById'
      },
      form: this.$form.createForm(this),
      formData: {
        createTime: '',
        creatorId: '',
        creatorName: '',
        id: '',
        reason: '',
        societyId: '',
        tableName: '',
        userId: '',
        userName: ''
      },
      formRules:{
        societyName:[{ required: true, message: '请输入社团名称!' }],
        userId:[{ required: true, message: '请选择申请人!' }],
        reason:[{ required: true, message: '请输入理由!' }],
        joinTime:[{ required: true, message: '请选择时间！' }],
      }
    }
  },
  beforeMount() {
    if (this.dataId) {
      this.queryData(this.dataId)
    }else{
      this.loading = false
    }
  },
  methods: {
    setUser(data) {
      this.formData.userName = data.name
    },
    setSocietyName(data){
      if(Array.isArray(data)&&data.length){
        this.formData.societyName = data[0].name
      }
    },
    add(data) {
      this.userDisabled = true
      this.open(data)
    },
    apply(data) {
      this.userDisabled = true
      this.open(Object.assign({},data,{
        workflowModel: {
          operation: 'start'
        }
      }))
    },
    edit(record) {
      this.userDisabled = true
      this.open(record)
    },
    open(record) {
      this.loading = false
      this.form.resetFields()
      if(record.id){
        this.queryData(record.id).then(res=>{
          if(record.workflowModel) Object.assign(this.formData,{workflowModel:record.workflowModel})
        })
      }else{
        this.formData = Object.assign({}, record)
      }
    },
    //查询表单数据
    queryData(id) {
      let params = { id }
      this.loading = false
      return getAction(this.url.queryById, params).then(res => {
        if (res.success) {
          this.formData = Object.assign({}, res.result)
        }
        return res
      }).finally(()=>{
        this.loading = false
      })
    },
    submitForm() {
      const that = this
      return new Promise((resolve, reject) => {
        // 触发表单验证
        that.$refs.form.validate((valid, fields) => {
          if (valid) {
            let httpurl = ''
            let method = ''
            if (!that.formData.id) {
              httpurl += that.url.add
              method = 'post'
            } else {
              httpurl += that.url.add
              method = 'post'
            }
            let formData = Object.assign({},that.formData)

            httpAction(httpurl, formData, method)
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  resolve(res)
                } else {
                  that.$message.warning(res.message)
                  reject(res.message)
                }
              })
              .finally(() => {
                that.loading = false
              })
          }else{
            that.$message.warning('请检查表单信息')
          }
        })
      })
    },
  },
  watch: {
    dataId:{
      handler(nv,ov){
        if (nv&&nv!=ov) {
          this.formData = {}
          this.queryData(nv)
        }
      }
    },
    data: {
      handler(nv, ov) {
        this.formData = nv
      },
      immediate: true,
      deep: true
    },
    formData: {
      handler(nv, ov) {
        // console.log(nv)
        this.$emit('onchange', nv)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style></style>
